<template>
  <div class="card-records borderStyle">
    <div class="card-records-title blueTitleStyle">刷卡记录</div>
    <div class="card-records-content bigTableStyle">
      <div class="table-box">
        <el-table
        border
          :data="tableData"
          style="width: 100%"
          height="100%"
          :row-class-name="tableRowClassName"
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="myIndex" label="序号" width="100"></el-table-column>
          <el-table-column prop="position" label="位置名称"></el-table-column>
          <el-table-column prop="czr" label="操作人"></el-table-column>
          <el-table-column prop="carnum" label="卡车车牌号"></el-table-column>
          <el-table-column prop="time" label="操作时间">
            <template slot-scope="scope">
              <div v-if='scope.row.time'>{{scope.row.time.substring(0,10)+' '+scope.row.time.substring(11,19)}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="path" label="查看图片">
            <template slot-scope="scope">
              <viewer :images="[scope.row.path]" @inited="inited(scope.row,$event)">
                <img :src="scope.row.path" alt srcset v-show="false" />
                <span class="iconfont iconpicture pitcure" @click="clickEvent(scope.row)"></span>
              </viewer>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="pagination-box elPaginationStyle centerbox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue,Prop ,Watch} from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { LocksAPIModule } from "@/store/modules/locks";
@Component
export default class CardRecords extends Vue {
@Prop() point_id!: any;
  tableData: Array<object> = [
    // {
    //   index: 1,
    //   name: "王小虎",
    //   operator: "上海市普陀区金沙江路 1518 弄",
    //   licenseNumber: "苏E.1234567",
    //   time: "2019-12-23 10：30：57",
    // },
  ];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  pages: any = {
    pageSize: 10,
    page: 1,
    totalSize: 0,
  };
  Mypoint_id=''
  mounted() {
    
    this.fetch();
  }
  fetch() {
    this.loading = true;
    var params = {
      stationId:this.$route.query.code,
      page:this.pages.page,
      size:this.pages.pageSize,
      id:this.Mypoint_id||''
    };
    (this as any).$services
      .getAccessRecordList({ data: params })
      .then((result: any) => {
        if (result.data) {
          let page = this.pages.page;
      let size = this.pages.pageSize;
          this.tableData = result.data.records.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
          this.pages = {
          pageSize: result.data.size,
          page: result.data.current,
          totalSize: result.data.total,
        };
          this.loading = false;
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }

  //table数据状态
  loading = false;

  // 初始化图片放大
  inited(row, viewer) {
    row.viewer = viewer;
  }
  // 录制/图像点击事件
  clickEvent(row: any) {
    // console.log(row);
    
    row.viewer.show();
  }
    // 1.videoData变化
  @Watch("point_id", {immediate: true,  deep: true })
  watchpoint_id(newData, oldData) {
    this.Mypoint_id=newData
    this.fetch()
  }
}
</script>

<style lang="scss" scoped>
.card-records {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 0.26rem;
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.26rem);
    .table-box {
      width: 100%;
      height: calc(100% - 0.6rem);
      // height: 100%;
      overflow: auto;
      .pitcure {
        font-size: 0.24rem;
        cursor: pointer;
      }
    }
    .pagination-box {
      width: 100%;
      height: 0.6rem;
    }
  }
}
</style>